'use strict'
const glob = require('glob')
const path = require('path')// 引入path模块
// const userConfig = require('./src/config/user.config.js')
// const os = require('os')
const webpack = require('webpack')
const pages = {}
// 获取本机ip
// const network = os.networkInterfaces()
// let localhost = '127.0.0.1'
// Object.keys(network).forEach(outerKey => {
//   if (outerKey === 'WLAN' || outerKey === '以太网') {
//     Object.keys(network[outerKey]).forEach(innerKey => {
//       if (network[outerKey][innerKey].family === 'IPv4') {
//         localhost = network[outerKey][innerKey].address
//       }
//     })
//   }
// })
function resolve (dir) {
  return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}
glob.sync('./src/pages/**/app.js').forEach(path => {
  const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
  pages[chunk] = {
    entry: path,
    template: 'public/index.html',
    filename: `${chunk}.html`,
    chunks: ['chunk-vendors', 'chunk-common', chunk]
  }
})
module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/',
  // publicPath: '/',
  runtimeCompiler: true,
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
    host: '127.0.0.1', // localhost 本机ip
    port: 8080,
    open: true,
    // 接触主机检查
    disableHostCheck: true,
    proxy: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: '127.0.0.1:8080', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
          '^/api': ''
        }
      }
    }
  },
  // css相关配置
  css: {
    // 启用 CSS modules
    // modules: true,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: true,
    // css预设器配置项
    loaderOptions: {
      css: {},
      sass: {
        data: '@import "@/styles/index.scss";'
      },
      postcss: {
        plugins: [
          // remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
          // 假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  },
  // 配置cdn 的地方  以前的webpack.conf.js
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        _: 'lodash'
      })
    ],
    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
    externals: {
      'jquery': '$',
      'axios': 'axios',
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'mint-ui': 'MINT',
      'vant': 'vant'
    }
  },
  // chainWebpack: config => {
  //   config.module
  //     .rule('iview')
  //     .test(/iview.src.*?js$/)
  //     .use('babel')
  //     .loader('babel-loader')
  //     .end()
  //   Object.keys(pages).forEach(page => {
  //     config.plugins.delete(`preload-${page}`)
  //     config.plugins.delete(`prefetch-${page}`)
  //   })
  // }
  // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
    // set第一个参数：设置的别名，第二个参数：设置的路径
      .set('@', resolve('./src'))
      .set('components', resolve('./src'))
      .set('assets', resolve('./src/assets'))
      .set('views', resolve('./src/views'))
      .set('network', resolve('./src/network'))
    // 注意 store 和 router 没必要配置
  }
}
